<script setup>
const { proxy } = getCurrentInstance()

const emit = defineEmits(['remove', 'edit', 'look'])
/**
  审核：View
  提交审核：CircleCheckFilled
  修改:Edit
  查看:Search
  删除:Delete
  入库:House
  出库:Position
  打印:Document
  交接:Sort
  提交审核 审核 入库 出库 交接 type：warning
  删除：type ：danger
  其他用 type ：primary
 */
const props = defineProps({
  list: {
    type: Array,
    default: () => [
      {
        icon: 'Edit',
        emit: 'edit',
        disabled: false,
        text: '修改',
        type: 'primary',
        hasPermi: ''
      },
      {
        icon: 'DeleteFilled',
        emit: 'remove',
        disabled: false,
        text: '删除',
        type: 'danger',
        hasPermi: ''
      },
      {
        icon: 'Search',
        emit: 'look',
        disabled: false,
        text: '查看',
        type: 'primary',
        hasPermi: ''
      }
    ]
  },
  //
  num: {
    type: Number,
    default: 3
  }
})

// 删除提示及回传
const remove = async () => {
  const result = await proxy.DelMessageBox()
  if (!result) return
  emit('remove')
}

// 过滤前三个
const popoverList = computed(() => props.list.slice(props.num, props.list.length))

// 保留前三个
const list = computed(() => props.list.slice(0, props.num))
onMounted(() => {
  let dropDom = document.querySelector('.operate1')
  dropDom.addEventListener('dragover', e => {
    e.preventDefault()

    console.log('在放置区域内拖拽中~', e.offsetY, e.offsetX)
  })

  dropDom.addEventListener('drop', e => {
    console.log('在放置区域内，放下了被拖拽元素~')
    console.log(e)
  })
})
</script>

<template>
  <div class="operate">
    <div class="operate1">
      <el-link
        v-for="(t, ind) in list"
        :key="ind"
        :disabled="t.disabled"
        :icon="t.icon || 'Edit'"
        :type="t.type || 'primary'"
        v-hasPermi="[t.hasPermi]"
        @click.stop="emit(t.emit)"
        >{{ t.text }}</el-link
      >
    </div>
    <!-- 冒泡事件 -->
    <div @click.stop>
      <el-popover v-if="props.list.length > props.num" placement="top-start" width="auto" trigger="click">
        <el-link
          draggable="true"
          v-for="(t, ind) in popoverList"
          :key="ind"
          :disabled="t.disabled"
          :icon="t.icon"
          :type="t.type"
          v-hasPermi="[t.hasPermi]"
          @click.stop="emit(t.emit)"
          >{{ t.text }}</el-link
        >
        <template #reference>
          <el-link type="info">更多</el-link>
        </template>
      </el-popover>
    </div>
  </div>
</template>
<style scoped lang="scss">
.operate {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.sup {
  cursor: pointer;
}
</style>
